<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <div class="tit">
          <h2>{{dataForm.topClassifyId?'编辑上层分类':'新增上层分类'}}</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
          <el-row>

            <el-form-item prop="classifyName" label="分类名称">
              <el-input type="text" v-model="dataForm.classifyName"></el-input>
            </el-form-item>
            <el-form-item prop="classifyIds" label="二级分类">
              <el-select v-model="dataForm.classifyIds" multiple clearable filterable>
                <el-option v-for="item in serverClassifyList" :value="item.id" :label="item.name" :key="item.id">

                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="类型" prop="classifyType">
                <el-select v-model="dataForm.classifyType">
                    <el-option v-for="item in classifyTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="classifyContent" label="分类描述">
              <el-input type="textarea" v-model="dataForm.classifyContent"></el-input>
            </el-form-item>
            <el-form-item prop="classifyLogo" label="分类Logo">
              <upload-img class="upload-img" @uploadFileList="getLogoUrl" folder="classifyLogo">
                <img v-if="dataForm.classifyLogo" width="100%" :src="dataForm.classifyLogo" alt="">
                <div class="tip">
                  <i class="el-icon-upload" v-if="!dataForm.classifyLogo"></i>
                  <div v-if="!dataForm.classifyLogo" class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                </div>
              </upload-img>
            </el-form-item>


          </el-row>

          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureClick">保 存</el-button>
              <el-button plain @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>

      </div>
    </div>
  </template>

  <script>
    import * as message from "@/constants/message";
    import TopClassifyApi from '@/api/server/topClassify';
    import UploadImg from "@/components/UploadImg"
    import ServerClassifyApi from "@/api/server/serverClassify";
    export default {
      data() {
        return {
          dataForm: {
            topClassifyId: "",
            classifyIds:[],
            classifyType:"",
            classifyName:"",
            classifyLogo: "",
            classifyContent: "",
          },
          serverClassifyList:[],
          classifyTypeList:[
            {id:1,name:"大屏生活类"},
            {id:2,name:"大屏医疗类"},
          ],
          loadingIns: false,
          roleRules: {
            classifyName: [
                {required: true, message: "请填写分类名称", trigger: "change" }
            ],
            classifyIds:[
              {required: true, message: "请选择二级分类", trigger: "change" }
            ],
            classifyType:[
              {required: true, message: "请选择类型", trigger: "change" }
            ],
          }
        }
      },
      components: {
        UploadImg
      },
      mounted() {
        this.init()
      },
      methods: {
        init() {
          // 修改
          this.getServerLevelList()
          if (this.$route.query.id) {
            this.dataForm.topClassifyId = this.$route.query.id
            this.getData()
          }
        },
        keydown(e) {
          if (e.keyCode == 32) {
            e.returnValue = false;
          }
        },
        getLogoUrl(val) {
          if (val.length > 0) {
            this.$Utils.notifySuccess("上传成功");
          }
          this.dataForm.classifyLogo = val[0]
        },
        // 获取服务分类二级列表
		getServerLevelList() {
			ServerClassifyApi.listIdName({ level: 2 }).then(res => {

				this.serverClassifyList = res.data
			})
		},
        getData() {
          TopClassifyApi.getTopClassifyInfo({
            topClassifyId: this.dataForm.topClassifyId
          }).then(res => {
            res.data.classifyList&&(res.data.classifyIds = res.data.classifyList.map(item=>item.id))
            this.$Utils.bindingBean(this.dataForm, res.data)
          })
        },
        sureClick() {
          this.$refs.dataForm.validate(valid => {
            if (valid) {
              this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                .then(() => {
                  if (this.dataForm.topClassifyId) {
                    this.editData();
                  } else {
                    this.addData();
                  }
                });
            }
          })
        },
        addData() {
          let param = {
            classifyName: this.dataForm.classifyName,
            classifyLogo: this.dataForm.classifyLogo,
            parentClassifyId: this.dataForm.parentClassifyId,
            classifyContent: this.dataForm.classifyContent,
            classifyType:this.dataForm.classifyType,
            classifyIds:this.dataForm.classifyIds
          };
          TopClassifyApi.addTopClassify(param).then(res => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
        },
        editData() {
          let param = {
            topClassifyId: this.dataForm.topClassifyId,
            classifyName: this.dataForm.classifyName,
            classifyLogo: this.dataForm.classifyLogo,
            parentClassifyId: this.dataForm.parentClassifyId,
            classifyContent: this.dataForm.classifyContent,
            classifyType:this.dataForm.classifyType,
            classifyIds:this.dataForm.classifyIds
          };
          TopClassifyApi.editTopClassify(param)
            .then(data => {
              this.$Utils.notifySuccess()
              this.returnList();
            })
        },
        returnList() {
          this.$store.dispatch('delView', this.$route);
          this.$router.push({path: '/server/topClassifyManagement'});
        }
      },

    }
  </script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
